<template>
    <div>
        <h1>测试axios发送请求</h1>
        <button @click="getMovies">发送请求加载所有电影列表</button> |||
        <!-- 根据关键字查询所有电影列表 -->
        <input v-model="name" type="text" placeholder="请输入电影名称关键字">&nbsp;
        <button @click="getMoviesByName">模糊查询</button>

        <h1>查询结果</h1>
       <div class="header">
      <div class="cover">封面图片</div>
      <div class="title">标题</div>
      <div class="actor">主演</div>
      <div class="showingon">上映时间</div>
      <div class="type">电影类型</div>
      <div class="duration">电影时长</div>
    </div>

     <div class="header" v-for="item in movies" :key="item.id">
      <div class="cover">
       <img :src="item.cover" alt="">
      </div>
      <div class="title">{{item.title}}</div>
      <div class="actor">{{item.star_actor}}</div>
    <div class="showingon">{{item.showingon}}</div>
      <div class="type">{{item.type}}</div>
      <div class="duration">{{Math.floor(item.duration/60)}}小时{{item.duration%60}}分 </div>
    </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'

    export default {
          data() {
             return {
                movies: [], // 存储所有的电影
                name: '' ,//绑定电影名称
            };
        },
        methods:{
        getMovies(){
            let instance = axios.create()
            instance({
                url:'https://web.codeboy.com/bmdapi/movie-infos',
                method:'GET',
                params:{page:1,pagesize:20}
            }).then(res=>{
                console.log(res)
                this.movies = res.data.data.result;
                console.log(this.movies);
            })
        },
        //模糊查询电影列表
        getMoviesByName(){
            let params = {name:this.name, page:1, pagesize:20}
            let instance = axios.create()
            instance({
                url:'https://web.codeboy.com/bmdapi/movie-infos/name',
                method:'POST',
                data: qs.stringify(params)
            }).then(res => {
                console.log(res)
                this.movies = res.data.data.result;
            }).catch(err => {
                console.log(err)
            })
        }
    },
}
    
</script>

<style lang="scss" scoped>
    .header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0px auto;
    padding: 15px 0px;
    border-bottom: 1px solid #ccc;
    .cover { 
        width: 150px;
        img{width: 60px;}
     }
    .title { flex: 1;}
    .actor { width: 300px; }
    .showingon { width: 150px; }
    .type { width: 200px; }
    .duration { width: 150px; }
}
</style>